<template>
  <div class="tabbar">
    <van-tabbar route v-model="active" inactive-color="#bcbcbc" active-color="#2a579a">
      <van-tabbar-item replace to="/" class="layout">
        <template>
          <i class="iconfont icon-shandian"></i>
        </template>
        <span>工作</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/role" class="layout">
        <template>
          <i class="iconfont icon-V"></i>
        </template>
        <span>角色</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/matter" class="layout">
        <template>
          <i class="iconfont icon-yuanquan"></i>
        </template>
        <span>事项圈</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/colleagues" class="layout">
        <template>
          <i class="iconfont icon-ai-connection"></i>
        </template>
        <span>同事</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/calendar" class="layout">
        <template>
          <i class="iconfont icon-linedesign-18"></i>
        </template>
        <span>日历</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      active: 0
    }
  }
}
</script>

<style>
@import "//at.alicdn.com/t/font_1783807_pjlc1cpri4l.css";
.layout i,
.layout span {
  display: block;
  text-align: center;
}
</style>